import './index.scss';

/*
* viewBox属性用来截图画布中的特定区域，其值由4个数字组成，依次为x、y、width、height。
* 显示区域的width和height有一定计算比例关系。
* width = (viewBoxWidth / svgWidth) * rectWidth; height = (viewBoxHeight / svgHeight) * rectHeight
* */
export function rectViewBox() {
    return <svg width="200" height="200" viewBox="10 10 13 13" style="border: 1px solid red">
        <rect x="0" y="0" width="20" height="20" fill="blue"/>
    </svg>;
}

/*
* rect表示矩形
* width：矩形的宽度 height：矩形的高度
* x：x坐标 y：y坐标。都是相对于画布svg的左上角坐标
* rx：x轴圆角半径 ry：y轴圆角半径
* */
export function svgRect() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" fill="blue"/>
    </svg>;
}

/*
* circle表示圆
* cx：圆心x坐标 cy：圆心y坐标 r：半径
* */
export function svgCircle() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <circle cx="100" cy="100" r="50" fill="blue"/>
    </svg>;
}

/*
* ellipse表示椭圆
* cx：圆心x坐标 cy：圆心y坐标
* */
export function svgEllipse() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <ellipse cx="100" cy="100" rx="50" ry="100" fill="blue"/>
    </svg>;
}

/*
* line表示线条
* cx：圆心x坐标 cy：圆心y坐标
* */
export function svgLine() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <line x1="0" y1="0" x2="100" y2="100" stroke="blue" stroke-width="2"/>
        {/*<line x1="100" y1="100" x2="200" y2="0" stroke="blue" stroke-width="2"/>*/}
    </svg>;
}

/*
* polyline 表示折线
* points：折线的点（x,y）10,10 20,0 30,10 40,0 这种形式。每个点都是由(x,y)组成一个点，每个点之间用空格隔开。
* */
export function svgPolyline() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <polyline
            fill="transparent"
            stroke="blue"
            stroke-width="1"
            points="10,10 20,0 30,10 40,0 50,10 60,0 70,10 80,0 90,10 100,0 110,10 120,0 130,10 140,0 150,10 160,0 170,10 180,0"/>
    </svg>;
}

/*
* polygon 表示折线
* points：折线的点（x,y）10,10 20,0 30,10 40,0 这种形式。每个点都是由(x,y)组成一个点，每个点之间用空格隔开。与polyline不同的是，它会自动闭合。
* */
export function svgPolygon() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <polygon
            fill="transparent"
            stroke="blue"
            stroke-width="1"
            points="100,20 150,20 100,50"/>
    </svg>;
}

/*
* path 表示路径
* M表示移动到某个点，H表示水平移动，V表示垂直移动，L表示画线，C表示画曲线，Z表示闭合
* 实例1：M 10 10 移动到坐标10,10，H 60 水平移动到坐标60,10，V 60 垂直移动到坐标60,60，H 10 水平移动到坐标10,60，L 10 10 画线到坐标10,10
* 实例2：M 10 10 移动到坐标10,10，H 60 水平移动到坐标60,10，V 60 垂直移动到坐标60,60，H 10 水平移动到坐标10,60，Z 闭合 画线到坐标10,10
* 实例2：M 10 10 移动到坐标10,10，h 60 水平移动距离60，v 60 垂直移动距离60，h -60 水平向左移动距离60，Z 闭合 画线到坐标10,10
* */
export function svgPath() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <path d="M 10 10 H 60 V 60 H 10 L 10 10" fill="transparent" stroke="blue"/>
        <path d="M 70 10 H 120 V 60 H 70 Z" fill="transparent" stroke="blue"/>
        <path d="M 10 70 h 60 v 60 h -60 Z" fill="transparent" stroke="blue"/>
    </svg>;
}

/*
* 贝塞尔曲线 (http://scss.jsrun.net/app/bezier)
* path 表示路径
* C 表示三次贝塞尔曲线 S 命令可以用来创建与前面一样的贝塞尔曲线
* Q 表示二次贝塞尔曲线 T 命令可以用来创建与前面一样的贝塞尔曲线
* */
export function svgBeiSaiEr() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <path d="M 10 10 C 30 50, 70 50, 90 10" stroke="black" fill="transparent"/>
    </svg>;
}

/*
* 弧形
* path 表示路径
* A 表示弧形
* rx, ry表示x轴圆角半径 ry 表示y轴圆角半径
* x-axis-rotation 表示圆弧旋转角度
* large-arc-flag 表示决定弧线是大于还是小于 180 度，0 表示小角度弧，1 表示大角度弧
* sweep-flag 表示弧线的方向，0 表示从起点到终点沿逆时针画弧，1 表示从起点到终点沿顺时针画弧
* x y 弧形结束点坐标
* */
export function svgArc() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <path d="M 20 20 A 100 50 0 1 1 100 100" stroke="black" fill="green"/>
    </svg>;
}

/*
* 使用style属性设置颜色
* */
export function svgStyle() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <rect x="20" y="20" width="100" height="100" id="rect"/>
    </svg>;
}

/*
* 渐变
* 使用defs:定义。这里面可以定义一些不会在 SVG 图形中出现、但是可以被其他元素使用的元素
* offset(区间偏移)
* stop-color(区间颜色)
* linearGradient(线性渐变)如下：
* x1，y1，x2，y2：渐变起点和终点坐标、
* radialGradient(径向渐变)如下：
* cx，cy：圆心坐标(百分比：相对于画布中心)、r：半径(百分比：相对于画布中心)；控制渐变的位置和大小
* fx，fy：渐变焦点中心坐标(百分比：相对于画布中心)；控制渐变焦点的位置
* spreadMethod: pad(默认)、repeat（平铺，开始-结束），reflect（平铺，结束-开始）
* gradientUnits:userSpaceOnUse 时，渐变的坐标是基于 SVG 整体视窗或者包含渐变定义的 <svg> 元素的用户坐标空间。这意味着，渐变的方向和颜色停止点的位置是相对于 SVG 的全局坐标系来定义的，不会随应用渐变的元素的大小改变而改变。
* gradientUnits:objectBoundingBox（这是默认值）时，渐变的坐标是基于应用渐变的元素的边界框（bounding box）。换句话说，渐变的方向和颜色停止点的位置是以元素自身尺寸的百分比形式来定义的，也就是说，如果元素的大小发生变化，渐变也会相应地按比例缩放。
* */
export function svgDefs() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <defs>
            {/*线性渐变*/}
            <linearGradient id="linearGradient1" cx="0.5" cy="0.5" r="0.5" gradientUnits='userSpaceOnUse'>
                <stop offset="0%" stop-color="blue"/>
                <stop offset="50%" stop-color="green"/>
                <stop offset="100%" stop-color="red"/>
            </linearGradient>
            <radialGradient id="radialGradient1" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
                <stop offset="0%" stop-color="blue"/>
                <stop offset="50%" stop-color="green"/>
                <stop offset="100%" stop-color="red"/>
            </radialGradient>
            <radialGradient id="radialGradient2" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25" spreadMethod="repeat">
                <stop offset="0%" stop-color="blue"/>
                <stop offset="50%" stop-color="green"/>
                <stop offset="100%" stop-color="red"/>
            </radialGradient>
            <radialGradient id="radialGradient3" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25" spreadMethod="reflect">
                <stop offset="0%" stop-color="blue"/>
                <stop offset="50%" stop-color="green"/>
                <stop offset="100%" stop-color="red"/>
            </radialGradient>
        </defs>
        <rect x="0" y="0" width="200" height="200" fill="url(#linearGradient1)"/>
        {/*<rect x="110" y="10" width="80" height="80" fill="url(#radialGradient1)"/>*/}
        {/*<path d="M 10 190 h 80 v -80 h -80 Z" fill="url(#radialGradient2)"/>*/}
        {/*<path d="M 190 190 h -80 v -80 h 80 Z" fill="url(#radialGradient3)"/>*/}
    </svg>;
}

/*
* pattern 用于定义可重复的图形模式
* pattern有两个patternUnits（默认值objectBoundingBox，不是自适应）、patternContentUnits（默认值userSpaceOnUse，自适应）:objectBoundingBox、userSpaceOnUse
* 场景1：<pattern id="pattern1" x="0" y="0" width=".5" height=".5" patternUnits="objectBoundingBox">
* 场景2：<pattern id="pattern1" x="0" y="0" width="45" height="45" patternUnits="userSpaceOnUse">
* */
export function svgPatterns() {
    return <svg width="200" height="200" style="border: 1px solid red">
        <defs>
            {/*patternUnits：objectBoundingBox*/}
            {/*<pattern id="pattern1" x="0" y="0" width="0.25" height="0.25" patternUnits="objectBoundingBox">*/}
            {/*    <rect x="0" y="0" width="50" height="50" fill="skyblue" stroke="green" stroke-width="1"/>*/}
            {/*    <circle cx="25" cy="25" r="20" fill="blue" fill-opacity="0.5"/>*/}
            {/*</pattern>*/}
            {/*patternUnits：userSpaceOnUse*/}
            {/*<pattern id="pattern1" x="0" y="0" width="45" height="45" patternUnits="userSpaceOnUse">*/}
            {/*    <rect x="0" y="0" width="45" height="45" fill="skyblue" stroke="green" stroke-width="1"/>*/}
            {/*    <circle cx="22.5" cy="22.5" r="20" fill="blue" fill-opacity="0.5"/>*/}
            {/*</pattern>*/}
            <pattern id="pattern1" x="0" y="0" width=".25" height=".25" patternContentUnits="userSpaceOnUse">
                <rect x="0" y="0" width="45" height="45" fill="skyblue" stroke="green" stroke-width="1"/>
                <circle cx="22.5" cy="22.5" r="20" fill="blue" fill-opacity="0.5"/>
            </pattern>
        </defs>

        <rect x="0" y="0" width="200" height="200" fill="url(#pattern1)"/>
        {/*<rect x="0" y="100" width="200" height="100" fill="url(#pattern2)"/>*/}
    </svg>
}
